import { FC, useEffect, useRef, useState } from "react"
import { TextArea, Space, Button } from 'antd-mobile'
import { FaceRecognitionOutline, AddSquareOutline,EditSOutline,PicturesOutline } from 'antd-mobile-icons'
import style from './index.module.scss'
import classnames from 'classnames/bind'
import EmojyBox from "../EmojyBox"
import { infoType } from "@/store/MessageStore"
import { useSelector } from "react-redux"
import Taro from "@tarojs/taro"
import { stateType } from "@/store"
const CBN = classnames.bind(style)

type InputBoxPropsType = {
    sendMessage:(info:infoType)=>void
    sendImage:()=>void
}



const InputBox: FC<InputBoxPropsType> = (props) => {
    const {sendMessage,sendImage} = props
    const {chatid} = useSelector((state:stateType)=>state.ServiceReducer)
    const {isend} = useSelector((state:stateType)=>state.TokenReduce)
    const [emojiflag, setemojiflag] = useState(false)
    const [filesflag, setfilesflag] = useState(false)
    const [textvalue,settextvalue] = useState('')
    const TextareaRef = useRef<HTMLTextAreaElement>(null)
    const tooglrEmojiBox = () => {
        setfilesflag(false)
        setemojiflag(!emojiflag)
    }

    const tooglrFileBox = () => {
        setemojiflag(false)
        setfilesflag(!filesflag)
    }

    useEffect(()=>{
        if(emojiflag){
            //不做处理
        }else{
            TextareaRef.current?.focus()
        }
    },[emojiflag])

    const sendTextMessage = ()=>{
        if(textvalue === '' ){
            Taro.showToast({
                title: '不可发送空数据',
                icon:"none",
                mask: true
            })
            return
        }



        sendMessage({
            type:'text',
            value:textvalue
        })
        settextvalue('')
    }

    const combineCls = {
        'inputbox':true,
        'isemojishow':emojiflag,
        'isfilesshow':filesflag
    }
    return <div className={CBN(combineCls)}>
        <div className={style['top']}>
            <div className={style['topLeft']}>
                <TextArea placeholder='请输入内容' value={textvalue} ref={TextareaRef} onChange={(e)=>{
                    settextvalue(e)
                }}/>
                <Button disabled={!isend} color='primary' size='mini' fill='solid' onClick={sendTextMessage}>
                    发送
                </Button>
            </div>
            <Space align='center' style={{ '--gap': '10px' }} className={style['spaceIcon']}>
                <div onClick={tooglrEmojiBox}>
                    {!emojiflag ? <FaceRecognitionOutline /> : <EditSOutline />}      
                </div>
                {chatid.includes('AI') ? null : <AddSquareOutline onClick={tooglrFileBox}/>}
                
            </Space>
        </div>
       {emojiflag ? <EmojyBox></EmojyBox> : null}
       {filesflag ?  <div className={style['filebox']}>
            <PicturesOutline color='var(--adm-color-primary)' onClick={sendImage}/>
        </div>  : null}

    </div>
}

export default InputBox